<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山羊の前端小窝</title>
    <style>
        /* Reset CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: rgb(235, 151, 151);
        }

        img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
            display: inline-block;
        }

        .shell {
            display: grid;
            padding: 20px;
            grid-gap: 20px;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-auto-rows: 270px;
            grid-auto-flow: dense;
        }

        .shell>div {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(61, 51, 51);
            border-radius: 5px;
            color: rgb(255, 255, 255);
            font: 100 100px 'Kristen ITC';
            position: relative;
        }

        span {
            position: absolute;
            top: -10px;
            left: 30px;
            text-shadow: -5px 0 rgb(0, 0, 0), 0 5px rgb(0, 0, 0), 5px 0 rgb(0, 0, 0), 0 -5px rgb(0, 0, 0);
        }

        .shell .wide {
            grid-column: span 2;
        }

        .shell .tall {
            grid-row: span 2;
        }

        .shell .big {
            grid-column: span 2;
            grid-row: span 2;
        }
    </style>
</head>

<body>
    <div class="shell">
        <div class="tall">
            <img src="1 (19).jpeg" alt="">
            <span>1</span>
        </div>
        <div>
            <img src="1 (2).jpeg" alt="">
            <span>2</span>
        </div>
        <div>
            <img src="1 (1).jpeg" alt="">
            <span>3</span>
        </div>
        <div class="wide">
            <img src="1 (34).jpeg" alt="">
            <span>4</span>
        </div>
        <div>
            <img src="1 (8).jpeg" alt="">
            <span>5</span>
        </div>
        <div class="tall">
            <img src="1 (40).jpeg" alt="">
            <span>6</span>
        </div>
        <div class="big">
            <img src="1 (7).jpeg" alt="">
            <span>7</span>
        </div>
        <div>
            <img src="1 (5).jpeg" alt="">
            <span>8</span>
        </div>
        <div class="wide">
            <img src="1 (6).jpeg" alt="">
            <span>9</span>
        </div>
        <div class="big">
            <img src="1 (10).jpeg" alt="">
            <span>10</span>
        </div>
        <div class="tall">
            <img src="1 (39).jpeg" alt="">
            <span>11</span>
        </div>
        <div>
            <img src="1 (12).jpeg" alt="">
            <span>12</span>
        </div>
        <div>
            <img src="1 (13).jpeg" alt="">
            <span>13</span>
        </div>
        <div>
            <img src="1 (14).jpeg" alt="">
            <span>14</span>
        </div>
        <div>
            <img src="1 (15).jpeg" alt="">
            <span>15</span>
        </div>
        <div class="wide">
            <img src="1 (35).jpeg" alt="">
            <span>16</span>
        </div>
        <div>
            <img src="1 (17).jpeg" alt="">
            <span>17</span>
        </div>
        <div>
            <img src="1 (18).jpeg" alt="">
            <span>18</span>
        </div>
        <div class="wide">
            <img src="1 (38).jpeg" alt="">
            <span>19</span>
        </div>
        <div>
            <img src="1 (20).jpeg" alt="">
            <span>20</span>
        </div>
        <div class="wide">
            <img src="1 (21).jpeg" alt="">
            <span>21</span>
        </div>
        <div class="big">
            <img src="1 (22).jpeg" alt="">
            <span>22</span>
        </div>
        <div>
            <img src="1 (23).jpeg" alt="">
            <span>23</span>
        </div>
        <div>
            <img src="1 (24).jpeg" alt="">
            <span>24</span>
        </div>
        <div class="big">
            <img src="1 (25).jpeg" alt="">
            <span>25</span>
        </div>
        <div class="tall">
            <img src="1 (39).jpeg" alt="">
            <span>26</span>
        </div>
        <div>
            <img src="1 (27).jpeg" alt="">
            <span>27</span>
        </div>
        <div>
            <img src="1 (28).jpeg" alt="">
            <span>28</span>
        </div>
        <div>
            <img src="1 (29).jpeg" alt="">
            <span>29</span>
        </div>
    </div>
</body>

</html>